<template>
  <el-card v-for="article in articles" :key="article.id" class="mb-2">
    <router-link :to="{ name: 'ArticleDetail', params: { id: article.id } }">
      <h2>{{ article.title }}</h2>
      <p>{{ article.abstract }}</p>
    </router-link>
    <el-tag>{{ article.category_name }}</el-tag>
    <span style="float: right">{{ article.create_time }}</span>
  </el-card>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import api from '../api'

const articles = ref([])

onMounted(async () => {
  const res = await api.get('/articles')
  articles.value = res.data.result.data
})
</script>
